<template>
    <view id="realname_group">
        <view class="realname-box">
            <view class="list-box">
                <view class="item" v-for="(e,i) in list" :key="i">
                    <view class="het"><h3>{{e.name}}</h3><text>共{{e.peopleNum}}人</text></view>
                    <view class="hm1">
                        <text>考勤</text>
                        <view class="pros">
                            <view class="lbg"><view class="green" :style="{width: e.todayCard_percent}"></view></view>
                            <text class="num">{{e.todayCard}}人</text>
                        </view>
                    </view>
                    <view class="hm1">
                        <text>在场</text>
                        <view class="pros">
                            <view class="lbg"><view class="blue" :style="{width: e.nowIn_percent}"></view></view>
                            <text class="num">{{e.nowIn}}人</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data () {
        return {
            projectData: wx.getStorageSync("projectData"),
            list:[
                {
                    name:'暂无数据',
                    peopleNum: 0,
                    nowIn: 0,
                    nowIn_percent: '0%',
                    todayCard:0,
                    todayCard_percent: '0%'
                }
            ]
        }
    },
    onLoad (option) {
      this.$axios({
        url : 'Api/Project/getProjectGroup',
        data : {
          appID : this.projectData.app_id,
          appToken : this.projectData.token,
          projectId : this.projectData.project_id,
        },
        type : 'smart'
      }).then(res => {
            if(res.data.status == 200000) {
                this.list = res.data.data.group
            } else {
                uni.showToast({
                    title: res.data.message,
                    icon: 'none',
                    mask: true,
                    duration: 2000
                })
            }
        }, (error) => {
            console.log(error)
        })
    },
    methods: {

    }
}
</script>
<style lang="scss">
    #realname_group{min-height:100%;position: relative;&:before{content:'';position: absolute;top:0;width:100%;background:#3271ef;height: 3.5rem;left:0;/*border-bottom-left-radius: 0.3rem;border-bottom-right-radius: 0.3rem;*/}
        .realname-box{padding: 1rem 1rem 1rem;margin-top:0px;
            .list-box{background:#fff;border-radius:0.3rem;box-shadow:0 0 5px rgba(0,0,0,0.05);position: relative;
                .item{padding:1.5rem 1.2rem;position: relative;&:before{content:'';position: absolute;bottom:0;left:1.2rem;right:1.2rem;height:1px;background:#e5e5e5;}&:last-child:before{height:0;}
                    .het{display: flex;align-items: center; justify-content: space-between;
                        h3{font-size:0.9rem;letter-spacing: 1px;}
                        text{font-size:0.9rem;letter-spacing: 1px;}
                    }
                    .hm1{margin-top:1rem;&:first-child{margin-top:1.5rem;}
                        text{font-size:0.8rem;color:#888888;}
                        .pros{margin-top:0rem;display:flex;align-items:center;
                            .lbg{width:81%;position:relative;height:0.4rem;overflow: hidden;border-radius:0.8rem;background:#dfdfdf;margin-right:0rem;
                                &>view{position: absolute;height:100%;left:0;border-radius:0.8rem;}
                                .blue{background:#56a6ff;}
                                .green{background:#1abb69;}
                            }
                            .num{color:#888;margin-left:0.5rem;text-align:left;}
                        }
                    }
                }
            }
        }
    }
</style>